<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="playerList()">玩家排行</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="teamList()">团队排行</el-button>
      </el-form-item>
    </el-form>
    <el-table
       :data="tableData.slice((currentPage3-1)*pagesize,currentPage3*pagesize)"
       style="width: 100%">
       <el-table-column
         label="头像"
         width="100"
         v-if="changeid==1">
         <template slot-scope="scope">
           <el-avatar shape="square" :src="scope.row.header"></el-avatar>
         </template>
       </el-table-column>
        <el-table-column
         label="队伍ID"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.teamID}}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="姓名"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="排行"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.rank }}</span>
         </template>
       </el-table-column>

       <el-table-column
         label="得分"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.gold }}</span>
         </template>
       </el-table-column>
        <el-table-column
         label="人数"
         width="100"
         v-if="changeid==2"
         >
         <template slot-scope="scope">
           <span>{{ scope.row.count}}</span>
         </template>
       </el-table-column>
     </el-table>
     <div class="pages" v-if="tableData!=''">
       <div class="block">
         <el-pagination
           @current-change="handleCurrentChange"
           :current-page.sync="currentPage3"
           :page-size="pagesize"
           layout="prev, pager, next, jumper"
           :total="total">
         </el-pagination>
       </div>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Method from '@/utils/proto'
import {posts} from '@/api/api'

export default {
    data() {
      return {
        tableData: [],
        formInline: {
           code: '',
        },
        changeid:1,
         currentPage3: 1,
         pagesize:15,
         total:100
      }
    },
    methods: {
      handleCurrentChange(val) {
        
      },
      changeList(){},
      onSubmit(){},
      playerList(){
        this.changeid = 1
        let data={
        method:Method.Method.MSG_AGENT_ACT_PLAYER_RANK_LIST,
        token:this.$store.getters.token,
        code:this.formInline.code,
      }
       posts(data).then((res) => {
         this.tableData = res.list
        this.total = res.list.length
      }).catch()
      },
      teamList(){
        this.changeid = 2
        let data={
        method:Method.Method.MSG_AGENT_ACT_TEAM_RANK_LIST,
        token:this.$store.getters.token,
        code:this.formInline.code,
      }
       posts(data).then((res) => {
         this.tableData = res.list
        this.total = res.list.length
      }).catch()
      }
    },
    created: function () {
    this.playerList();
  },

  }
</script>

<style lang="scss" scoped>
.pages{
    width: 100%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
  }
</style>
